<template>
  <el-dialog
    :title="`${formData.id ? '编辑' : '新增'}经纪`"
    :visible.sync="isShowDialog"
    @close="btnCancel"
  >
    <el-form
      ref="addForm"
      :rules="ecoRules"
      label-width="80px"
      :model="formData"
    >
      <el-form-item label="名称:" prop="name">
        <el-input v-model="formData.name" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="邮箱:" prop="emali">
        <el-input
          v-model="formData.emali"
          placeholder="请输入正确的邮箱地址/如1234@qq.com"
        />
      </el-form-item>
      <el-form-item label="电话:" prop="phone">
        <el-input
          v-model="formData.phone"
          placeholder="请输入正确的11位手机号码"
        />
      </el-form-item>
      <el-form-item label="地址:" prop="address">
        <el-input v-model="formData.address" placeholder="请输入地址" />
      </el-form-item>
      <el-form-item label="描述:" prop="desc">
        <el-input
          type="textarea"
          :rows="4"
          v-model="formData.desc"
          placeholder="请输入相关描述信息"
        />
      </el-form-item>
      <el-form-item label="封面:" prop="image">
        <UploadImage ref="ecoPhoto"></UploadImage>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-row type="flex" justify="center">
        <el-button @click="btnCancel" class="btnCancel">取 消</el-button>
        <el-button type="primary" @click="btnOK" class="btnOk">确 定</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { addEconomics, getEconomics, editEconomics } from "@/api/economics";
import UploadImage from "@/components/UploadImage";

export default {
  components: {
    UploadImage,
  },
  data() {
    const emailValidator = (rule, val, callback) => {
      if (
        /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(
          val
        )
      ) {
        callback();
      } else {
        callback(new Error("邮箱格式错误"));
      }
    };

    const phoneValidator = (rule, val, callback) => {
      if (/^1[3456789]\d{9}$/.test(val)) {
        callback();
      } else {
        callback(new Error("手机号码格式有误"));
      }
    };
    return {
      formData: {
        name: "",
        desc: "",
        phone: "",
        address: "",
        emali: "",
        image: "",
      },
      isShowDialog: false,
      ecoRules: {
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        desc: [{ required: true, message: "描述不能为空", trigger: "blur" }],
        emali: [
          { required: true, message: "邮箱不能为空", trigger: "blur" },
          { validator: emailValidator, trigger: "blur" },
        ],
        phone: [
          { required: true, message: "手机号码不能没空", trigger: "blur" },
          { validator: phoneValidator, trigger: "blur" },
        ],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        image: [{ required: true, message: "图片不能为空", trigger: "change" }],
      },
    };
  },
  props: {
    ecoData: {
      type: Array,
    },
  },
  methods: {
    btnCancel() {
      this.$refs.ecoPhoto.fileList = [];

      // 1. 关闭弹窗
      this.isShowDialog = false;
      setTimeout(() => {
        // 2. 清理数据
        this.formData = {
          name: "",
          desc: "",
          phone: "",
          address: "",
          email: "",
          image: "",
        };
        // 3. 清理报错
        this.$refs.addForm.resetFields();
      }, 200);
    },
    // 发送请求，添加经纪或者编辑经纪
    async btnOK() {
      // 校验表单
      this.formData.image = this.$refs.ecoPhoto.fileList[0].url;
      await this.$refs.addForm.validate();
      // 发请求
      // 这里需要判断是编辑还是新增
      // 主要依赖 this.formData.id 是否存在
      if (this.formData.id) {
        // 编辑
        await editEconomics(this.formData);
      } else {
        // 新增
        await addEconomics(this.formData);
      }

      //关闭弹窗
      this.isShowDialog = false;
      // 提醒用户
      this.$message.success("操作成功");
      setTimeout(() => {
        //  清理数据
        this.formData = {
          name: "",
          desc: "",
          phone: "",
          address: "",
          email: "",
          image: "",
        };
        // 3. 清理报错
        this.$refs.addForm.resetFields();
        // 刷新数据
        this.$parent.getEconomicslist();
      }, 200);
    },
    //获取指定经济
    async editEconomics(id) {
      this.formData = await getEconomics(id);
      this.$refs.ecoPhoto.fileList = [{ url: this.formData.image }];
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-dialog__header {
  background-color: #6cf;
  .el-dialog__title {
    color: #fff;
  }
}
.btnCancel {
  margin-right: 50px;
}
.btnOk {
  margin-left: 50px;
}
</style>